<script>
/* eslint-disable no-unused-vars */
import FormCreate from '@form-create/element-ui'
import { createVNode, defineComponent } from 'vue'
import {
    ElRadioButton,
    ElRadioGroup,
    ElLink,
    ElButton,
    ElImage
} from 'element-plus/lib/index'
import { Edit, Delete, Upload, CloseBold } from '@element-plus/icons-vue'
import { openUpload } from '@/util/buttonUtil'
import axios from 'axios'

export default defineComponent({
    props: {
        // eslint-disable-next-line vue/require-default-prop
        modelValue: String,
        // eslint-disable-next-line vue/require-default-prop
        options: Array,
        // eslint-disable-next-line vue/require-default-prop
        resources: Object
    },
    emits: ['update:modelValue', 'changeFile'],
    data: function() {
        return {
            loading: false,
            notifys: {
                IMAGE: '支持PNG/JPGE/JPG',
                VIDEO: '支持MP4',
                AUDIO: '支持MP3'
            },
            acpect: {
                IMAGE: 'image/*',
                VIDEO: '.mp4,.MP4',
                AUDIO: '.mp3,.MP3'
            }
        }
    },
    computed: {
        val() {
            return this.modelValue
        }
    },
    methods: {
        async doUpload() {
            let res = await openUpload()
            this.loading = true
            // 上传
            let formData = new FormData()
            formData.append('file', res[0])
            let fileRes = await axios.post('/download/mon/upload', formData)
            this.$emit('update:modelValue', fileRes.data.data.path)
            this.loading = false
        }
    },
    render() {
        const props = {
            type: this.val ? 'success' : 'default',
            icon: Upload,
            size: 'mini',
            onClick: this.doUpload,
            loading: this.loading
        }
        const spanProps = {
            href: this.val,
            style: 'font-size:12px;margin-left:10px;color:var(--el-color-primary)'
        }
        const preview = ElImage
        const preViewProps = {
            src: this.val,
            'preview-src-list': [this.val],
            'append-to-body': true,
            style: 'width:100px;height:100px;margin-top:20px;'
        }
        return [
            createVNode('div', {
                style: 'display:flex;flex-direction: column;'
            }, [
                createVNode(
                    ElButton,
                    props,
                    this.val ? '点击更新' : '点击上传'
                ),
                this.val
                    ? createVNode('div', { style: 'position: relative;' }, [createVNode(ElImage, preViewProps), createVNode(CloseBold, {
                        style: 'position: absolute;z-index:20000;right:0px;width:20px;top:-80px;cursor: pointer;',
                        onClick: () => this.$emit('update:modelValue', '')
                    }) ])
                    : createVNode('span', preViewProps)
            ])
            // createVNode(preview, preViewProps),
        ]
    }
})
</script>
